<!--<template>-->
<!--  <div style="overflow-y: auto;height: 100%">-->
<!--    &lt;!&ndash;    <div>&ndash;&gt;-->
<!--    &lt;!&ndash;      正常的电流电压报表&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    <div id="export_echarts_quality"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;    <div>&ndash;&gt;-->
<!--    &lt;!&ndash;      异常的电流电压报表&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    <div id="export_echarts_quality1"></div>&ndash;&gt;-->


<!--        <template_echarts ref="template_echarts" canvas="content_echarts" width_props="80%"/>-->
<!--    &lt;!&ndash;    <div>&ndash;&gt;-->
<!--    <template_echarts ref="template_echarts_ex" canvas="content_echarts_ex" width_props="80%"/>-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->


<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {getCurrentInstance, reactive} from "vue"-->
<!--import {get_quality} from "@/api/cockpit/statistics"-->
<!--import {handle_time} from "@/utils/handle_key";-->
<!--import {useRoute, useRouter} from "vue-router";-->
<!--import {dataURLtoFile} from "@/utils/base_to_file";-->
<!--import {useStore} from "vuex"-->
<!--import {upload_file} from "@/api/upload";-->
<!--import {message} from "ant-design-vue";-->
<!--import router from "@/router";-->
<!--import template_echarts from "@/views/statistics/template";-->

<!--export default {-->
<!--  name: "export_echarts_quality",-->
<!--  props: {-->
<!--    inputTime: {-->
<!--      type: String,-->
<!--      default: handle_time("YYYY-mm-dd", new Date())-->
<!--    }-->
<!--  },-->
<!--  setup(props, context) {-->
<!--    const store = useStore()-->
<!--    store.commit("SET_LOADING", true)-->
<!--    const {ctx} = getCurrentInstance()-->
<!--    const route = useRoute()-->
<!--    console.log(route)-->
<!--    const data_params = reactive({-->
<!--      params: {-->
<!--        "inputTime": handle_time("YYYY-mm-dd", new Date()),-->
<!--        "cid": 0-->
<!--      }-->
<!--    })-->
<!--    const option1 = {-->
<!--      title: [-->
<!--        {-->
<!--          top: '40%',-->
<!--          left: 10,-->
<!--          subtextStyle: {-->
<!--            align: 'left',-->
<!--            color: '#ffffff',-->
<!--            fontSize: 12,-->
<!--          },-->
<!--          // subtext: '每\n月\n执\n行\n金\n额'//   \n换行-->
<!--        },-->
<!--        {-->
<!--          top: '40%',-->
<!--          right: 10,-->
<!--          subtextStyle: {-->
<!--            align: 'right',-->
<!--            color: '#ffffff',-->
<!--            fontSize: 12,-->
<!--          },-->
<!--          // subtext: '累\n计\n执\n行\n金\n额'-->
<!--        },-->
<!--      ],-->
<!--      grid: {-->
<!--        left: 40,-->
<!--        right: 40,-->
<!--        bottom: 20,-->
<!--        top: 30,-->
<!--      },-->
<!--      backgroundColor: {-->
<!--        type: 'linear',-->
<!--        x: 0,-->
<!--        y: 0,-->
<!--        x2: 0,-->
<!--        y2: 1,-->
<!--        colorStops: [{-->
<!--          offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色-->
<!--        }, {-->
<!--          offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色-->
<!--        }],-->
<!--        global: false // 缺省为 false-->
<!--      },-->
<!--      tooltip: {-->
<!--        trigger: 'axis',-->
<!--        axisPointer: {-->
<!--          type: 'cross',-->
<!--          crossStyle: {-->
<!--            color: '#999'-->
<!--          }-->
<!--        }-->
<!--      },-->
<!--      legend: {-->
<!--        data: [-->
<!--          {name: '电流1', icon: 'circle'},-->
<!--          {name: '电压1', icon: 'circle'},-->
<!--          {name: '电流'},-->
<!--          {name: '电压'}-->
<!--        ],-->
<!--        textStyle: {-->
<!--          color: '#ffffff',-->
<!--          fontSize: 11-->
<!--        },-->
<!--        y: 'top',-->
<!--        x: 'center',-->
<!--      },-->
<!--      xAxis: [-->
<!--        {-->
<!--          type: 'category',-->
<!--          axisLine: {-->
<!--            lineStyle: {-->
<!--              color: '#1F7EFF',-->
<!--              width: 1-->
<!--            }-->
<!--          },-->
<!--          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],-->
<!--          axisPointer: {-->
<!--            type: 'shadow'-->
<!--          },-->
<!--          axisLabel: {-->
<!--            interval: 0,//横轴信息全部显示-->
<!--            textStyle: {-->
<!--              color: '#fff'-->
<!--            },-->
<!--            fontSize: 11,-->
<!--            // rotate:45,//度角倾斜显示-->
<!--            formatter: function (value) {-->
<!--              return value.length > 5 ? value.substring(0, 5) + '...' : value;-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      ],-->
<!--      yAxis: [//这里配置两条Y轴-->
<!--        {-->
<!--          type: 'value',-->
<!--          splitLine: {-->
<!--            show: false,-->
<!--            lineStyle: {-->
<!--              color: '#021439',-->
<!--              width: 1-->
<!--            }-->
<!--          },-->
<!--          axisLine: {-->
<!--            show: true,-->
<!--            lineStyle: {-->
<!--              color: '#1F7EFF',-->
<!--              width: 1-->
<!--            }-->
<!--          },-->
<!--          axisLabel: {-->
<!--            show: true,-->
<!--            textStyle: {-->
<!--              color: '#fff'-->
<!--            },-->
<!--            fontSize: 11,-->
<!--            interval: 'auto',-->
<!--            formatter: '{value}'-->
<!--          },-->
<!--          name: '电流（A）',-->
<!--          nameTextStyle: {-->
<!--            color: '#fff'-->
<!--          }-->
<!--        },-->
<!--        {-->
<!--          type: 'value',-->
<!--          splitLine: {-->
<!--            show: false,-->
<!--            lineStyle: {-->
<!--              color: '#021439',-->
<!--              width: 1-->
<!--            }-->
<!--          },-->
<!--          // splitArea: {show: true},-->
<!--          axisLine: {-->
<!--            show: true,-->
<!--            lineStyle: {-->
<!--              color: '#1F7EFF',-->
<!--              width: 1-->
<!--            }-->
<!--          },-->
<!--          axisLabel: {-->
<!--            show: true,-->
<!--            textStyle: {-->
<!--              color: '#fff'-->
<!--            },-->
<!--            fontSize: 11,-->
<!--            interval: 'auto',-->
<!--            formatter: '{value}'-->
<!--          },-->
<!--          name: '电压（V）',-->
<!--          nameTextStyle: {-->
<!--            color: '#fff',-->
<!--            fontSize: 11,-->
<!--          }-->
<!--        }-->
<!--      ],-->
<!--      series: [-->
<!--        {-->
<!--          name: '电流',-->
<!--          barWidth: '30%',-->
<!--          type: 'line',-->
<!--          smooth: true,-->
<!--          itemStyle: {-->
<!--            normal: {-->
<!--              lineStyle: {-->
<!--                color: '#E63234'-->
<!--              },-->
<!--              fontSize: 11,-->
<!--              color: '#E63234',-->
<!--            }-->
<!--          },-->
<!--          label: {-->
<!--            normal: {-->
<!--              show: true,-->
<!--              formatter: (params) => {-->
<!--                return (params.value)-->
<!--              },-->
<!--              color: '#E63234',-->
<!--              position: 'top'-->
<!--            }-->
<!--          },-->
<!--          areaStyle: {-->
<!--            opacity: 0.1,-->
<!--            color: '#E63234'-->
<!--          },-->
<!--          symbol: 'circle',-->
<!--          symbolSize: 10, //折线点的大小-->
<!--          yAxisIndex: 0, ////使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。-->
<!--          data: [-->
<!--            220, 112, 221, 23, 45, 71, 112, 160, 219, 288, 363, 453]-->
<!--        },-->
<!--        {-->
<!--          name: '电压',-->
<!--          barWidth: '30%',-->
<!--          type: 'line',-->
<!--          smooth: true,-->
<!--          itemStyle: {-->
<!--            normal: {-->
<!--              lineStyle: {-->
<!--                color: '#42C96E'-->
<!--              },-->
<!--              fontSize: 11,-->
<!--              color: '#42C96E',-->
<!--            }-->
<!--          },-->
<!--          label: {-->
<!--            normal: {-->
<!--              show: true,-->
<!--              formatter: (params) => {-->
<!--                return (params.value)-->
<!--              },-->
<!--              color: '#42C96E',-->
<!--              position: 'top'-->
<!--            }-->
<!--          },-->
<!--          areaStyle: {-->
<!--            opacity: 0.1,-->
<!--            color: '#42C96E'-->
<!--          },-->
<!--          symbol: 'circle',-->
<!--          symbolSize: 10, //折线点的大小-->
<!--          yAxisIndex: 1,-->
<!--          data: [0, 0, 10, 23, 12, 22, 33, 12, 32, 1, 3, 5]-->
<!--        },-->
<!--      ],-->
<!--    };-->
<!--    const init_echarts = () => {-->
<!--      const echarts = ctx.$echarts.init(document.getElementById("export_echarts_quality"));-->
<!--      echarts.setOption(option1)-->
<!--      const resultBase64 = echarts.getDataURL({-->
<!--        type: 'png',-->
<!--        pixelRatio: 2,-->
<!--        // backgroundColor: '#fff'-->
<!--      });-->
<!--      // console.log(resultBase64)-->
<!--      console.log(dataURLtoFile(resultBase64, "test"))-->
<!--      upload(dataURLtoFile(resultBase64, "test"))-->
<!--      window.addEventListener("resize", function () {-->
<!--        echarts.resize();-->
<!--      });-->

<!--    }-->

<!--    const init_e_echarts = () => {-->
<!--      const echarts = ctx.$echarts.init(document.getElementById("export_echarts_quality1"));-->
<!--      echarts.setOption(option1)-->
<!--      const resultBase64 = echarts.getDataURL({-->
<!--        type: 'png',-->
<!--        pixelRatio: 2,-->
<!--        // backgroundColor: '#fff'-->
<!--      });-->
<!--      upload(dataURLtoFile(resultBase64, "test"))-->
<!--      window.addEventListener("resize", function () {-->
<!--        echarts.resize();-->
<!--      });-->
<!--    }-->

<!--    const get_list = async () => {-->
<!--      const res = await get_quality(data_params.params)-->
<!--      console.log(res)-->
<!--    }-->

<!--    const upload = async (files) => {-->
<!--      let params = {-->
<!--        file: files-->
<!--      }-->
<!--      const res = await upload_file(params)-->
<!--      console.log(res)-->
<!--      if (res.code === 1) {-->
<!--        message.success("文件导出成功")-->
<!--        return-->
<!--      }-->
<!--      message.warning(res.message)-->

<!--    }-->

<!--    setTimeout(async () => {-->
<!--      // await init_echarts()-->
<!--      // await init_e_echarts()-->
<!--      // router.back()-->
<!--      store.commit("SET_LOADING", false)-->
<!--    }, 1000)-->
<!--    return {-->
<!--      get_list,-->
<!--      init_echarts,-->
<!--      option1-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // this.init_echarts()-->
<!--     this.$refs.template_echarts.init_echarts(this.option1)-->

<!--    this.$refs.template_echarts_ex.init_echarts(this.option1)-->

<!--  },-->
<!--  components: {-->
<!--    template_echarts-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--#export_echarts_quality {-->
<!--  height: 20rem;-->
<!--  width: 100%;-->
<!--}-->

<!--#export_echarts_quality1 {-->
<!--  height: 20rem;-->
<!--  width: 100%;-->
<!--}-->
<!--</style>-->

<template>
  <div style="height: 100%;overflow-y: auto">
    <div style="text-align: left;font-size: 0.9rem;font-weight: bolder">
      <div>
        <span>{{ data_export.data.equipmentName }}</span>
      </div>
      <div>
        <span style="color: #878787">{{ data_export.data.uEquipmentCode }}</span>
      </div>
<!--      uEquipmentCode-->
    </div>
    <div>
      <div class="table_title">
        焊接参数追溯记录表
      </div>
      <div class="table_tr">
        <div class="table_td_title">
          客户名称
        </div>
        <div class="table_td_title">

        </div>
        <div class="table_td_title">
          工件名称
        </div>
        <div class="table_td_title">

        </div>
      </div>

      <div class="table_tr">
        <div class="table_td_title">
          工件图号
        </div>
        <div class="table_td_title">

        </div>
        <div class="table_td_title">
          工件编号
        </div>
        <div class="table_td_title">

        </div>
      </div>

      <div class="table_tr">
        <div class="table_td_title">
          焊接操作者
        </div>
        <div class="table_td_title">
          {{ data_export.data.realname }}
        </div>
        <div class="table_td_title">
          焊接时间
        </div>
        <div class="table_td_title">
          {{ data_export.data.btime }}-{{ data_export.data.etime }}
        </div>
      </div>

      <!--    图表的渲染-->
      <div class="table_content_echarts">
        <div class="content_echarts" :id="canvas1" :style="{'height':height,'width':width}"></div>
      </div>
      <div class="table_tr">
        <div class="table_td_title">
          平均焊接电流
        </div>
        <div class="table_td_title">
          {{data_export.data.cAvg}}
        </div>
        <div class="table_td_title">
          平均焊接电压
        </div>
        <div class="table_td_title">
          {{data_export.data.vAvg}}
        </div>
      </div>
      <div class="table_tr">
        <div class="table_td_title">
          焊接时长
        </div>
        <div class="table_td_title">
          {{data_export.data.vhour}}
        </div>
        <div class="table_td_title">
          参数异常率
        </div>
        <div class="table_td_title">
          {{data_export.data.eRange}}
        </div>
      </div>
    </div>
    <div class="top_box"></div>
    <div>
      <div class="table_title">
        焊接参数追溯记录表(参数异常)
      </div>
      <div class="table_tr">
        <div class="table_td_title">
          客户名称
        </div>
        <div class="table_td_title">

        </div>
        <div class="table_td_title">
          工件名称
        </div>
        <div class="table_td_title">

        </div>
      </div>

      <div class="table_tr">
        <div class="table_td_title">
          工件图号
        </div>
        <div class="table_td_title">

        </div>
        <div class="table_td_title">
          工件编号
        </div>
        <div class="table_td_title">

        </div>
      </div>

      <div class="table_tr">
        <div class="table_td_title">
          焊接操作者
        </div>
        <div class="table_td_title">
          {{ data_export.data.realname }}
        </div>
        <div class="table_td_title">
          焊接时间
        </div>
        <div class="table_td_title">
          {{ data_export.data.btime }}-{{ data_export.data.etime }}
        </div>
      </div>

      <!--    图表的渲染-->
      <div class="table_content_echarts">
        <div class="content_echarts" :id="canvas" :style="{'height':height,'width':width}"></div>
      </div>
      <div class="table_tr">
        <div class="table_td_title">
          异常平均焊接电流
        </div>
        <div class="table_td_title">
          {{ data_export.data.ceAvg }}
        </div>
        <div class="table_td_title">
          异常平均焊接电压
        </div>
        <div class="table_td_title">
          {{ data_export.data.veAvg }}
        </div>
      </div>
      <div class="table_tr">
        <div class="table_td_title">
          异常焊接时长
        </div>
        <div class="table_td_title">
          {{ data_export.data.vEhour }}
        </div>
        <div class="table_td_title">
          电流/电压超差比率
        </div>
        <div class="table_td_title">
          {{ data_export.data.cShorRange }}/{{ data_export.data.vEhour }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {dataURLtoFile} from "@/utils/base_to_file";
import {getStyleByEl} from "@/utils/dom/get_dom_style";
import {option_line} from "@/utils/echarts_option/double_line";
import {getCurrentInstance, reactive} from "vue"
import {useStore} from "vuex";

export default {
  name: "template",
  props: {
    content_data: {
      type: Object,
      default: {}
    },
    width_props: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      height: "",
      width: "",
      canvas: "canvas",
      canvas1: "canvas1"
    }
  },

  setup() {
    const {ctx} = getCurrentInstance()
    const store = useStore()
    const data_export = reactive({
      data: {}
    })
    console.log("gettter", store.getters.export_data)

    async function handle_data() {
      const data = store.getters.export_data
      const y_data_all1 = data.allData.currentValue
      const y_data_all2 = data.allData.voltage
      const x_data_all = data.allData.retime
      const y_data_ex1 = data.exData.currentValue
      const y_data_ex2 = data.exData.voltage
      const x_data_ex = data.exData.retime
      /**
       * 基础数据
       * */
      data_export.data = data.tjData
      debugger

      await ctx.init_echarts(ctx.canvas, {
        y_data1: y_data_all1,
        y_data2: y_data_all2,
        x_data: x_data_all,
      })
      await ctx.init_echarts(ctx.canvas1, {
        y_data1: y_data_ex1,
        y_data2: y_data_ex2,
        x_data: x_data_ex,
      })

    }

    setTimeout(() => {
      handle_data()
    }, 1000)
    return {
      data_export
    }
  },
  methods: {
    init_echarts(canvas, data) {
      const echarts = this.$echarts.init(document.getElementById(canvas));
      option_line.backgroundColor.colorStops[0].color = "#76adec"
      option_line.backgroundColor.colorStops[1].color = "#0f3f77"

      option_line.series[0].data = data.y_data1
      option_line.series[1].data = data.y_data2
      option_line.xAxis[0].data = data.x_data
      echarts.setOption(option_line)
      const resultBase64 = echarts.getDataURL({
        type: 'png',
        pixelRatio: 2,
        // backgroundColor: '#fff'
      });
      // console.log(resultBase64)
      // console.log(dataURLtoFile(resultBase64, "test"))
      // upload(dataURLtoFile(resultBase64, "test"))
      window.addEventListener("resize", function () {
        echarts.resize();
      });

    }
  },
  mounted() {
    const el = document.querySelector('.table_content_echarts');
    const style = getStyleByEl(el)
    this.height = style.height;
    this.width = style.width
    // this.init_echarts()
  }
}
</script>

<style scoped lang="scss">

.top_box {
  //margin-bottom: 1rem;
  border-bottom: 1px dashed #cccccc;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.table_title {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bolder;
}

.table_content_echarts {
  display: flex;
  width: 100%;
  border: 1px solid black;
  height: 20rem;
  display: flex;
  justify-content: center;
  //align-items: center;
}

.content_echarts {
  width: 100%;
  display: flex;
  justify-content: center;
  //height: 10rem;
}

.table_tr {
  display: flex;
  align-items: center;

  .table_td_title {
    flex: 1;
    font-size: 1rem;
    border: 1px solid black;
    height: 2rem;
  }
}
</style>

